<template>
  <div>
    <el-dialog title="区域价格设置" :visible.sync="subDialogVisible" width="50%">
      <el-card>
        <el-table :data="shippingRegionPriceList" border stripe>
          <el-table-column label="省份ID" prop="provinceId"></el-table-column>
          <el-table-column label="省份" prop="provinceName">
          </el-table-column>
          <el-table-column label="价格">
            <template slot-scope="scope">
            <el-input
                v-model="scope.row.price"
                placeholder="请输入价格"
                @change="addShippingRegionPrice(scope.row.provinceId, scope.row.price)">
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="添加时间" prop="addTime"></el-table-column>
        </el-table>
      </el-card>
    </el-dialog>
  </div>
</template>

<script>
import MallApi from "@/api/Mall.js";
export default {
  props: {},
  data() {
    return {
      subDialogVisible : false,
      queryInfo: {
        templateId: "",
      },
      shippingRegionPriceList: [],
      addShippingRegionPriceVisible: false,
      addShippingRegionPriceForm: {
        id: "",
        provinceId: "",
        price: ""
      },
      addShippingRegionPriceRules: {

      },
    };
  },
  watch: {},
  methods: {
    showShippingRegionPriceList(templateId) {
      this.subDialogVisible = true;
      this.queryInfo.templateId = templateId;
      this.addShippingRegionPriceForm.templateId = templateId;
      MallApi.getShippingRegionPriceList(this.queryInfo).then((res) => {
        if (res.success) {
          this.shippingRegionPriceList = res.data.shippingRegionPriceList;
        } else {
          return this.$message.error("获取列表失败");
        }
      });
    },
    // 添加
    addShippingRegionPrice(provinceId, price) {
      MallApi.saveShippingRegionPrice({'templateId':this.queryInfo.templateId,'provinceId':provinceId,'price':price}).then((res) => {
            if (res.success) {

            }else {
                return this.$message.error("失败:" + res.msg);
            }
          });
    }
  },
};
</script>

<style>
.form_ipt {
  width: 450px;
}
</style>
